<!--
 * @Author: GKN
 * @Date: 2023-07-26 14:26:31
 * @LastEditTime: 2024-01-31 10:00:27
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\card5.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->

<template>
    <div class="card cursor-p">
        <el-row :gutter="20" style="width: 100%;">
          <el-col :span="10">
            <div class="img" >
                <imgView :src="props.url" />
            </div>
            </el-col>
            <el-col :span="14">
                <div class="main">
                    <div class="title omit">{{ props.title }}</div>
                    <div class="desc omit-5">{{ props.desc }}</div>
                </div>
            </el-col>
        </el-row>
    </div>
  </template>
  
  <script setup>
  const props = defineProps({
        url: {
            type: String,
            default: "",
        },
        title:{
            type: String,
            default: "",
        },
        desc:{
            type: String,
            default: "",
        }
    })
  </script>
  
  <style lang='less' scoped>
      .card{
        width: 100%;
        border-radius: 6px 6px 0 0;
        overflow: hidden;
        box-sizing: border-box;
        display:flex;
        .img{
            width: 138px;
            height: 166px;
            background: #ececec;
            border-radius: 6px 6px 0 0;
            overflow: hidden;
        }
        .main{
            padding:15px 0 0 22px;
            box-sizing: border-box;
            background: #fff;
            .title{
                font-size: 14px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: left;
                font-weight: bold;
                
            }
            .desc{
                font-size: 14px;
                color:#8d8d8d;
                margin-top:10px;
                text-align: left;
            }
        }
      }
  </style>
  

